<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>动画</title>
		<style type="text/css">
			.box{
				width: 600px;
				height: 800px;
				border: 5px solid darkmagenta;
				font-size: 36px;
				/* step2:绑定动画
				animation:动画名称  持续时间  次数
				infinite:无限次
				 */
				animation: change 10s infinite linear 1s;/* (时间后面加次数就是旋转的次数) */
			}
			/* 
			动画:
			step1（第一步）:创建关键帧
			@keyframes动画名称{
				from{}
				top{}
			}
			step2:绑定动画
			animation
			from：开始帧    top:结束帧
			百分比（20%）：时间节点
			*/
			@keyframes change{
				0%,40%{  /* 某种状态持续一段时间 */
				   transform: rotate(0);/* 旋转 */
				   background-color: magenta;/* 背景颜色 */
				}
				50%,60%{
				   width: 800px;
				   transform:rotate(1800deg);
				   background-color: brown;
				}
				70%,95%{
					width: 1200px;
					height: 200px;
					background-color: blue;
					transform: rotate(360deg);
				}
				/* 
				100%{
					width: 300px;
					height: 300px;background-color: crimson;
					transform: rotate(360deg);
				}
				 */
			}
		@-webkit-keyframes change{
			from{  /*开始帧 */
				   transform: rotate(0);
				   background-color: magenta;
			}
			top{   /* 结束帧 */
				   width: 800px;
				   transform:rotate(360deg);
				   background-color: brown;
				   
			}
		}
		@-moz-keyframes change{
			from{  /*开始帧 */
				   transform: rotate(0);
				   background-color: magenta;
			}
			top{   /* 结束帧 */
				   width: 800px;
				   transform:rotate(360deg);
				   background-color: brown;
				   
			}
		}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>
